<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>前端路由实现</title>
    <style>
        ul {
            width: 30%;
            height: 600px;
            background: red;
            float: left;
            margin: 0;
        }

        #contentWrap {
            height: 600px;
            float: left;
            background: #ccc;
        }
    </style>
</head>
<body>
<ul>
    <li><a href="#/">aaaaaa</a></li>
    <li><a href="#/home">bbbbb</a></li>
    <li><a href="#/about">cccccc</a></li>
</ul>
<iframe id="contentWrap"></iframe>
<script type="text/javascript" src="jquery-1.10.0.js"></script>
<script type="text/javascript" src="router.js"></script>
<script type="text/javascript">
  Router.router('/', function() {
    $("#contentWrap").attr("src","a.html");
  });
  Router.router('/home', function() {
    $("#contentWrap").attr("src", "b.html");
  });
  Router.router('/about', function() {
    $("#contentWrap").attr("src", "c.html");
  });
</script>
</body>
</html>